import React from 'react';
import {Link} from 'react-router-dom';
import {Avatar, Icon,Input,Button} from 'antd';
import './chat.css';
let messageDivKey=0;
class Chat extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            chatScript:[],
            sendInputValue:'',
        }
        this.sendMessage=this.sendMessage.bind(this);
        this.sendInputChange=this.sendInputChange.bind(this);
        this.otherMessage=this.otherMessage.bind(this);
    };
    sendMessage(e){
        let testScript=this.state.chatScript;
        testScript.push(
            <div className="myMessageBox" key={messageDivKey++}>
                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                <div className="myMessage"><span>{this.state.sendInputValue}</span></div>
            </div>
        )
        this.setState({
            chatScript:testScript,
            sendInputValue:'',
        })
    }
    otherMessage(e){
        let testScript=this.state.chatScript;
        testScript.push(
            <div className="otherMessageBox" key={messageDivKey++}>
                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                <div className="otherMessage">4888885555555555555556</div>
            </div>
        )
        this.setState({
            chatScript:testScript,
        })
    }
    componentWillMount(){
    }
    sendInputChange(e)
    {
        this.setState({
            sendInputValue:e.target.value,
        })
    }
    render(){
        return (
            <div>
                <div className="findHead">name</div>
                <div>
                    {this.state.chatScript}

                </div>
                <div className="chatSendInput">
                    <Input value={this.state.sendInputValue} onChange={this.sendInputChange}/>
                    <Button onClick={this.sendMessage}>发送</Button>
                </div>
                <Link to="/app/home/index">
                    <Icon type="left" className="returnIconButton" />
                </Link>
            </div>
        )
    }
}
export default Chat;